<!--
 * @Auther: 
 * @Date: 2025-11-11 17:24:09
 * @Description: 
 * @LastEditTime: 2025-11-12 17:21:04
 * @LastEditors: binghuanli
-->
<!-- src/components/CardComponent.vue -->
<template>
	<div
		class="card col-lg-4 col-sm-12 col-sm-x-12 flex-h animated"
		@mouseenter="handleMouseEnter"
		@mouseleave="handleMouseLeave"
	>
		<img
			:src="props.image"
			:alt="props.title"
			:class="{
				'rotate-active': isRotating,
			}"
			class="defaultClass"
		/>
		<div class="text">
			<span
				><router-link :to="props.link || ''">{{
					props.title
				}}</router-link></span
			>
			<p>{{ description }}</p>
		</div>
	</div>
</template>

<script setup>
import { ref } from "vue"
const props = defineProps({
	link: String,
	image: String,
	title: String,
	description: String,
})
const isRotating = ref(false)
const handleMouseEnter = () => {
	isRotating.value = true
}
const handleMouseLeave = () => {
	isRotating.value = false
}
</script>

<style lang="scss" scoped>
.card {
	display: flex;
	align-items: center;
	background: #fff;
	box-shadow: 0 8px 12px #e4e4e473;
	border: 1px solid rgba(208, 206, 206, 0.4) !important;
	img {
		max-width: 60px;
		margin-right: 1.5rem;
	}
	.text {
		span {
			a {
				text-decoration: none;
				color: #777;
				font-size: 1.2rem;
				font-weight: bold;
				&:hover {
					color: #10bbff;
				}
			}
		}
		p {
			width: 12em;
			color: #959595;
			margin: 0.5rem 0 0;
		}
	}
}
.rotate-active {
	transform: rotate(-45deg);
	animation-fill-mode: both;
	transition: 0.5s;
}
.defaultClass {
	transition: 0.5s;
	animation-fill-mode: both;
}

.card .text {
	span,
	p {
		display: flex;
		justify-content: flex-start;
	}
	margin-left: 1rem;
}
.card {
	flex-direction: row;
	align-items: center;
	text-align: center;
	padding: 0.5rem;
	border-radius: 1rem;
}
@media (max-width: 768px) {
	.card img {
		margin-right: 0;
		width: 50px;
	}
	.col-sm-12 {
		grid-column: span 12;
	}
}
//大于768px
@media (min-width: 768px) {
	.card {
		padding: 2rem;
		border-radius: 1.5rem;
		margin: 0.5rem 0;
		min-width: 300px;
	}
	.col-lg-4 {
		grid-column: span 4;
	}
}
.card-wrap .row .flex-h {
	display: flex;
	align-items: center;
	transition: all 0.08s linear;
}
</style>
